<template>
  <div class="container">
    <el-dialog
      title="预览题目"
      :visible="isShowDialog"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-form v-loading="isShow">
        <el-row>
          <el-col :span="6">【题型】: {{ detailList.questionType }}</el-col>
          <el-col :span="6">【编号】: {{ detailList.id }}</el-col>
          <el-col :span="6"
            >【难度】: {{ detailList.difficulty | subjectFilter }}</el-col
          >
          <el-col :span="6">【标签】: {{ detailList.tags }}</el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="6">【学科】: {{ detailList.subjectName }}</el-col>
          <el-col :span="6">【目录】: {{ detailList.directoryName }}</el-col>
          <el-col :span="6">【方向】: {{ detailList.direction }}</el-col>
        </el-row>
        <br />
        <hr />
        【题干】:
        <p v-html="detailList.question"></p>
        <p>
          {{
            detailList.questionType | questionTypeFilter
          }}题选项:（以下选中的选项为正确答案）
        </p>
        <div
          v-for="item in detailList.options"
          :key="item.code"
          style="padding: 8px 0"
        >
          <el-radio
            v-if="detailList.questionType === '1'"
            :value="item.isRight"
            :label="1"
            >{{ item.title }}</el-radio
          >
          <el-checkbox
            v-if="detailList.questionType === '2'"
            :value="item.isRight ? true : false"
            >{{ item.title }}
          </el-checkbox>
        </div>
        <hr />
        【参考答案】:<el-button
          type="danger"
          @click="clickPlay"
          size="small"
          style="margin-left: 10px"
        >
          视频答案解析
        </el-button>
        <div v-show="play">
          <video
            :src="detailList.videoURL"
            controls
            style="width: 300px; height: 200px"
          ></video>
        </div>
        <hr />
        <p v-html="detailList.answer"></p>
        <hr />
        【题目备注】：<span>{{ detailList.remarks }}</span>
        <template #footer class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关闭</el-button>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions.js'
// 常量文件
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    }
  },
  data () {
    return {
      isShow: false,
      play: false, // 对话框视频标签显隐
      detailList: []
    }
  },

  methods: {
    //
    closeDialog () {
      this.$emit('update:isShowDialog', false)
      this.play = false
    },
    // 点击显示video
    clickPlay () {
      // video显现
      this.play = !this.play
    },

    // 打开Dialog触发
    async openDialog () {
      this.isShow = true
      // 发请求获取基础详细数据
      const { data } = await detail({ id: this.id })
      // 赋值
      this.detailList = data
      this.isShow = false
    }
  },

  // 过滤器
  filters: {
    // 处理难度格式
    subjectFilter (val) {
      // console.log(+val)
      const res = difficulty.find((item) => item.value === +val)
      return res ? res.label : '未知'
    },

    // 处理试题类型格式
    questionTypeFilter (val) {
      const res = questionType.find((item) => item.value === +val)
      return res ? res.label : '未知'
    }
  }
}
</script>

<style scoped lang='less'></style>
